<template>
  <div class="index page_w_h" :style="{ backgroundImage: bg }">
    <div class="info">
      <img src="../assets/img/eat.png" alt="" :style="{ opacity: showArr[0] ? 1 : 0 }"
        :class="{ avator: true, move: showArr[0] }">
      <p :style="{ opacity: showArr[1] ? 1 : 0 }" :class="{ name: true, move: showArr[1] }">
        肥桃，加油❤
      </p>
      <p :style="{ opacity: showArr[2] ? 1 : 0 }" :class="{ ticket: true, move: showArr[2] }">Hang on to your
        dreams<br>坚持你的 梦想</p>
      <ul :style="{ opacity: showArr[3] ? 1 : 0 }" :class="{ icons: true, move: showArr[3] }">
        <li><img src="../assets/img/pic.png" title="照片" @click="link('/pic2')"></li>
        <li><img src="../assets/img/avi.png" title="视频" @click="link('/vid2')"></li>
      </ul>
    </div>
  </div>
</template>


<script setup>
import data from '../assets/data/data';
import { ref } from 'vue'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
let isOpen = ref(false)
let showArr = ref([false, false, false, false])
let num = 0
let infoShow = ref(0)
const bgs = data.bgs
let bg = ref('')

function random(n) {
  return Math.floor(Math.random() * n)
}
bg.value = `url(${bgs[random(bgs.length)]})`

const timer = setInterval(() => {
  infoShow.value = 1
  showArr.value[num] = true
  num++
  if (num >= 4) {
    clearInterval(timer)
  }
}, 500)

function link(params) {
  router.push(params)
}
</script>

<style lang="less" scoped>
.index {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;

    .avator {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: block;
    }

    .name {
      margin: 12px 0;
      font-size: 24px;
      color: white;
    }

    .ticket {
      font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      font-size: 1.2em;
      font-weight: lighter;
      letter-spacing: 3px;
      color: #ccc;
      -webkit-font-smoothing: antialiased;
      text-align: center;
    }

    .icons {
      display: flex;
      justify-content: space-around;
      width: 50%;
      margin-top: 20px;

      li {
        color: white;
        cursor: pointer;
      }

      img {
        width: 20px;
      }
    }

    .move {
      animation-name: move;
      animation-duration: 1s;
      animation-delay: 0;
    }
  }

}

@keyframes move {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translate(0px);
    opacity: 1;
  }
}
</style>
